<template>
  <px-button v-has="'ALL_ALERT_TEMPLATE_ADD'" type="primary" style="margin-bottom: 8px" @click="showCreateTempl">新建通知模板</px-button>
  <px-table :data="tableData" class="equip-table" height="calc(100vh - 290px)" border>
    <px-table-column prop="templateName" label="通知模板名称" min-width="150" show-overflow-tooltip />
    <px-table-column prop="noticeTemplateContent" label="通知模板内容" min-width="400" show-overflow-tooltip />
    <px-table-column prop="status" label="状态">
      <template #default="scope">
        <div class="status">
          <div :class="['circle', scope.row.enableStatus === 'ON' ? 'green' : 'red']" />
          <div :style="{ color: scope.row.enableStatus === 'ON' ? '#10B981' : '#EF4444' }">
            {{ scope.row.enableStatus === "ON" ? "启用" : "停用" }}
          </div>
        </div>
      </template>
    </px-table-column>
    <px-table-column label="操作" class-name="small-padding fixed-width">
      <template #default="scope">
        <px-tooltip content="编辑" placement="top">
          <px-button v-has="'ALL_ALERT_TEMPLATE_EDIT'" link type="primary" icon="EditPen" @click="handleUpdate(scope.row)" />
        </px-tooltip>
        <px-tooltip :content="scope.row.enableStatus === 'OFF' ? '启用' : '禁用'" placement="top">
          <px-button
            v-has="'ALL_ALERT_TEMPLATE_ABLE'"
            link
            :type="scope.row.enableStatus === 'ON' ? 'warning' : 'success'"
            :icon="scope.row.enableStatus === 'ON' ? 'CircleClose' : 'CircleCheck'"
            @click="handleEnable(scope.row)"
          />
        </px-tooltip>
        <px-tooltip content="删除" placement="top">
          <px-button v-has="'ALL_ALERT_TEMPLATE_DELETE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
        </px-tooltip>
      </template>
    </px-table-column>
  </px-table>
  <pagination
    v-show="total > 0"
    v-model:page="queryParams.pageNum"
    v-model:limit="queryParams.pageSize"
    class="equip-table-pagination"
    :total="total"
    @pagination="queryTable"
  />

  <!--新建报警规则-->

  <Teleport to="#alert__rules__index">
    <createTempl v-model:is-main="isMain" v-model:is-edit="isEdit" :edit-val="form" @handleSubmit="handleSubmit" />
  </Teleport>
</template>

<script setup lang="ts">
import { deleteTemplateApi, detailTemplateApi, queryTemplateListApi, updateTemplateApi } from "@/api/alert";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, ref, toRefs } from "vue";
import createTempl from "./createTempl.vue";
const isMain = defineModel("isMain");

const isEdit = ref(false);
const data = reactive<Record<string, any>>({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  total: 0,
  form: {}
});

const { queryParams, tableData, total, form } = toRefs(data);

// 进入页面时触发
onMounted(() => queryTable());

const queryTable = async () => {
  const data = await queryTemplateListApi(queryParams.value);
  tableData.value = data?.data;
  total.value = data?.total;
};

const handleDelete = async row => {
  try {
    const { templateId, templateName } = row;
    PxMessageBox.confirm(`是否确认删除报警模板名称为${templateName}的数据项？`, "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true
    }).then(async () => {
      await deleteTemplateApi({ templateId });
      PxMessage({
        message: "删除成功",
        type: "success"
      });
      queryTable();
    });
  } catch (error) {
    console.log(error);
  }
};

const handleUpdate = async row => {
  try {
    const { templateId } = row;
    form.value = await detailTemplateApi({ templateId });
    isEdit.value = true;
    isMain.value = false;
  } catch (error) {
    console.log(error);
  }
};

/** 启用/禁用按钮操作 */
const handleEnable = row => {
  const { enableStatus, id, templateName } = row;
  PxMessageBox.confirm(`是否确认${enableStatus === "ON" ? "禁用" : "启用"}模板名称为${templateName}的数据项？`, "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await updateTemplateApi({ id, enableStatus: enableStatus === "ON" ? "OFF" : "ON" });
      PxMessage.success(`${enableStatus === "ON" ? "禁用" : "启用"}成功`);
      queryTable();
    })
    .catch(() => {});
};

const handelCancel = () => {
  reset();
};
/** 表单重置 */
function reset() {
  form.value = {
    alarmLevel: "",
    pushPost: "",
    pushChannel: [],
    pushTemplate: "",
    enableStatus: ""
  };
}

const handleSubmit = async (formEl: any) => {
  handelCancel();
  queryTable();
};

const showCreateTempl = () => {
  isMain.value = false;
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
.status {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;

  .circle {
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
  }

  .green {
    background-color: #10b981;
  }

  .red {
    background-color: #ef4444;
  }
}
</style>
